
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容 -->
    <h2>自定义指令</h2>

    <component id="root">
        <div v-big="number"></div>
    </component>
</body>

<script src="../script/vue.js"></script>

<script>
    Vue.config.devtools = true;

    // Vue.directive('big', {
    //     bind(element, binding) {
    //         element.innerText = binding.value * 100; // 指令绑定的值  100
    //     }
    // })

    let vue = new Vue({
        el: '#root',
        data: {
           number: 1, 
        },
        directives: {
            big(element, binding){
                console.log(element); // 指令绑定的元素  <div v-big="number"></div>
                console.log(binding); // 指令的相关信息
              element.innerText = binding.value * 100; // 指令绑定的值  100   
            }
        }
    })
</script>
</html>
